<script setup lang="ts">
import { getUserInfoById } from '@/api/user';
import { User } from '@/api/user/type';
import YHeader from '@/components/YHeader.vue';
import YIcon from '@/components/YIcon.vue';
import { router } from '@/router';
import { useUserStore } from '@/store/user';
import { onMounted, ref } from 'vue';
import Avatar from './components/Avatar.vue';
import { useRoute } from 'vue-router';

const userInfo = ref({} as User);
const show = ref(true)

onMounted(() => {
    const route = useRoute();
    const id = route.query.id;
    if (id != undefined && !Array.isArray(id)) {
        check(id);
        getUserInfoById(id).then((res) => {
            userInfo.value = res.data as User;
        });
    }
})

const check = (id: string) => {
    const userStore = useUserStore();
    let userId = userStore.getId;
    if (id === userId) {
        show.value = false;
    } else {
        show.value = true;
    }
}

const toChat = () => {
    router.push({
        name: "MessageChat",
        query: {
            receiverId: userInfo.value.id
        }
    });
}

const toInfo = () => {
    router.push({
        name: 'UserInfo',
        query: {
            'id': userInfo.value.id
        }
    })
}

</script>

<template>
    <div class="container">
        <YHeader></YHeader>
        <div class="content">
            <div class="info">
                <div class="left">
                    <Avatar v-model="userInfo.avatar"></Avatar>
                    <div class="row">
                        <p class="text">{{ userInfo.nickname }}</p>
                        <YIcon class="icon" name="xingbie-nv" v-if="userInfo.sex == '女'"></YIcon>
                        <YIcon class="icon" name="xingbie-nan" v-else></YIcon>
                    </div>
                </div>
                <div class="right" v-if="show">
                    <van-button @click="toChat" type="primary" style="margin-right: 5%;">私信</van-button>
                    <van-button type="primary">关注</van-button>
                </div>
                <div class="right" v-else>
                    <van-button @click="toInfo" class="button" size="small" text="编辑资料"></van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    .content {
        height: 93%;
        margin-top: 3%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .info {
            width: 90%;
            height: 15%;
            background-color: white;
            display: flex;
            flex-direction: row;
            align-items: center;
            border-radius: 15px;
            .left {
                width: 40%;
                display: flex;
                flex-direction: column;
                align-items: center;
                .row {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    .text {
                        margin: 0%;
                    }
                }
            }
            .right {
                width: 52%;
                display: flex;
                flex-direction: row;
                justify-content: right;
                padding: 4%;
                .button {
                    border-radius: 15px;
                }
            }
        }
    }
}
</style>